<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			html,body { margin: 0; height: 100%; }
      #c { width: 100%; height: 100%; display: block; }
		</style>
	</head>
	<body>
    <canvas id="c"></canvas>
		<script src="js/three.js"></script>
		<script>
      function main() {
        const canvas = document.querySelector('#c')
        const renderer = new THREE.WebGLRenderer({canvas})

        const fov = 40
        const aspect = 2
        const near = 0.1
        const far = 1000
        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
        camera.position.z = 50

        const scene = new THREE.Scene()

        const innerRadius = 2
        const outerRadius = 4
        const thetaSegments = 10
        const boxGeometry = new THREE.RingGeometry(innerRadius, outerRadius, thetaSegments)

        const material = new THREE.MeshBasicMaterial({color: 0xFFFF00})
        const mesh = new THREE.Mesh(boxGeometry, material)
        scene.add(mesh)

        function resizeRendererToDisplaySize(renderer) {
          const canvas = renderer.domElement
          const width = canvas.clientWidth
          const height = canvas.clientHeight
          const needResize = canvas.width !== width || canvas.height !== height
          if (needResize) {
            renderer.setSize(width, height, false)
          }
          return needResize
        }

        function render(time) {
          time *= 0.001

          if (resizeRendererToDisplaySize(renderer)) {
            const canvas = renderer.domElement
            camera.aspect = canvas.clientWidth / canvas.clientHeight
            camera.updateProjectionMatrix()
          }

          mesh.rotation.y = time
          mesh.rotation.x = time

          renderer.render(scene, camera)

          requestAnimationFrame(render)
        }
        requestAnimationFrame(render)
      }

      main()
    </script>
	</body>
</html>